/*
 * @Description: 输入车牌号的组件
 * @Author: shuaishuai.wang
 * @Date: 2019-10-11 13:33:32
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-10-11 17:59:29
 */
<template>
  <div
    class="mask"
    v-show="inputState"
  >
    <div class="input_area">
      <h3 class="fontsize32">车牌号</h3>
      <div class="plate_type fontsize28">
        <div
          class="plate_name"
          :class="selectType == 0 ? 'select_type' : ''"
          @click="selectThisType(0)"
        >普通车牌</div>
        <div
          class="plate_name"
          :class="selectType == 1 ? 'select_type' : ''"
          @click="selectThisType(1)"
        >新能源车牌</div>
        <div
          class="plate_name"
          :class="selectType == 2 ? 'select_type' : ''"
          @click="selectThisType(2)"
        >特殊车牌</div>
      </div>
      <div class="color">
        <p class="title fontsize28">请选择车牌颜色</p>
        <div
          class="plate_area"
          v-show="selectType == 0"
        >
          <div
            class="plate"
            @click="chooseThisPlate(0)"
          >
            <i
              class="normal_icon iconfont"
              :class="choosePlate == 0 ? 'icon-circle-o' : 'icon-circle'"
            ></i>
            <img :src="plateImg[0]">
          </div>
          <div
            class="plate"
            @click="chooseThisPlate(1)"
          >
            <i
              class="normal_icon iconfont"
              :class="choosePlate == 1 ? 'icon-circle-o' : 'icon-circle'"
            ></i>
            <img :src="plateImg[1]">
          </div>
        </div>
        <div
          class="plate_area"
          v-show="selectType == 1"
        >
          <div
            class="plate"
            @click="chooseThisPlate(2)"
          >
            <i
              class="normal_icon iconfont"
              :class="choosePlate == 2 ? 'icon-circle-o' : 'icon-circle'"
            ></i>
            <img :src="plateImg[2]">
          </div>
          <div
            class="plate"
            @click="chooseThisPlate(3)"
          >
            <i
              class="normal_icon iconfont"
              :class="choosePlate == 3 ? 'icon-circle-o' : 'icon-circle'"
            ></i>
            <img :src="plateImg[3]">
          </div>
        </div>
        <div
          class="plate_area"
          v-show="selectType == 2"
        >
          <div class="plate plate_special flex-h">
            <i class="normal_icon iconfont icon-circle-o"></i>
            <p class="fontsize28">其他</p>
          </div>
        </div>
      </div>
      <div class="plate_number">
        <div class="normal_input">
          <p class="title fontsize28">请选择输入车牌号码</p>
          <div
            class="input_plate_area"
            v-show="selectType < 2"
          >
            <div class="special_input flex-h flex-hsb">
              <div
                v-for="(plate, index) in plateNumberArr"
                :key="index"
                class="input_case"
                :class="plateNumberIndex == index ? 'select_input_case' : ''"
                @click="choosePlateIndex(index)"
              >{{plate}}</div>
            </div>
          </div>
          <div
            class="special_input_area"
            v-show="selectType == 2"
          >
            <input
              class="plate_input"
              type="text"
              v-model="plateNumber"
              @input="specialPlateNumber"
            >
          </div>
        </div>
      </div>
      <div class="ctrl_area flex-h flex-hsb">
        <div
          class="cancel_button"
          @click="closeInput"
        >取消</div>
        <div
          class="confirm_button"
          @click="submitPlateInfo"
        >确定</div>
      </div>
    </div>
    <div
      class="keyboard fontsize32"
      v-show="selectType < 2 && keyboardState"
    >
      <div class="normal_key flex-h flex-hc flex-hw fontsize32">
        <p
          v-for="(keyword, index) in keyarr.normal.split('')"
          :key="index"
          @click="inputPlateNumber(keyword)"
          :class="selectType < 2 && numberLetterKeyState.normal.split('')[index] < 1 ? 'not_allow': ''"
        >{{keyword}}</p>
      </div>
      <div class="special_key flex-h flex-hc flex-hw  fontsize32">
        <p
          v-for="(keyword, specialIndex) in keyarr.special.split('')"
          :key="specialIndex"
          @click="inputPlateNumber(keyword)"
          :class="selectType < 2 && numberLetterKeyState.special.split('')[specialIndex] < 1 ? 'not_allow': ''"
        >{{keyword}}</p>
        <p
          class="close_keyboard"
          @click="keyboardState = false"
        >确定</p>
        <p
          @click="inputPlateNumber()"
          class="iconfont icon-key-delete"
          :class="plateNumberIndex > 0 ? 'small_delete' : ''"
        ></p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'InputPlateNo',
  props: {
    inputState: {
      type: Boolean,
      default: false
    } // 弹窗状态
  },
  data() {
    return {
      Toast: '', // 弹窗组件
      selectType: 0, // 当前选中的车牌类型，默认-1即无类型
      plateColor: -1, // 车牌颜色码，-1为未选择车牌颜色
      plateNumberArr: ['', '', '', '', '', '', ''], // 车牌信息
      keyarr: { // 键盘内容
        normal: '京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁',
        special: '琼'
      },
      keyboardState: true, // 车牌输入键盘开关状态
      plateNumberIndex: 0, // 车牌输入下标
      plateNumberLength: 7, // 车牌长度
      numberLetterKey: { // 数字字母键盘
        normal: '1234567890ABCDEFGHIJKLMNOPQRST',
        special: 'UVWXYZ学挂'
      },
      numberLetterKeyState: { // 利用01进行数字字母键盘的输入约束
        normal: '',
        special: ''
      },
      firstArr: { // 省简称键盘
        normal: '京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁',
        special: '琼'
      },
      choosePlate: -1, // 当前选择的车牌，-1未选择，0蓝色，1黄色，2绿色，3黄绿色，99其他
      plateNumber: '', // 车牌号
      plateImg: [
        require('@static/image/appointmentForm/blue.png'),
        require('@static/image/appointmentForm/yellow.png'),
        require('@static/image/appointmentForm/green.png'),
        require('@static/image/appointmentForm/yellow-green.png')
      ]
    }
  },
  mounted() {
    this.$Toast.then(Toast => {
      this.Toast = Toast
    })
  },
  methods: {
    selectThisType(num) { // 选择当前车牌类型
      if (this.selectType !== num) { // 避免重复点击同一类型
        this.plateNumberIndex = 0
        this.choosePlate = -1
        this.keyarr = this.firstArr
        this.selectType = num
        this.plateNumber = ''
        // 重置所有车牌参数并将车牌类型进行切换
        switch (num) {
          case 0:
            this.plateNumberArr = ['', '', '', '', '', '', '']
            this.plateNumberLength = 7
            break
          case 1:
            this.plateNumberArr = ['', '', '', '', '', '', '', '']
            this.plateNumberLength = 8
            break
          default:
            this.choosePlate = 99
        }
      }
    },
    inputPlateNumber(keyword) { // 键盘输入车牌号操作
      if (keyword) { // 当前是输入操作
        if (this.selectType < 2 && this.plateNumberIndex > 0) { // 判断为数字字母输入键盘
          let index = this.numberLetterKey.special.indexOf(keyword)
          let state = 'special'
          if (index < 0) { // 判断该字符是否属于最底部的一行
            index = this.numberLetterKey.normal.indexOf(keyword)
            state = 'normal'
          }
          if (this.numberLetterKeyState[state].charAt(index) < 1) { // 当前字符对应的状态码小于1标识不可输入，阻断输入操作
            console.log(state)
            return
          }
        }
        Vue.set(this.plateNumberArr, this.plateNumberIndex, keyword) // 将对应下表
        this.plateNumberIndex++
        if (this.plateNumberIndex > this.plateNumberLength - 1) { // 当前已达输入字数最大值
          this.plateNumberIndex = this.plateNumberLength - 1 // 之所以加一是在删除时正确删除最后一位
        }
      } else {
        if (this.plateNumberArr[this.plateNumberIndex].length < 1) {
          this.plateNumberIndex-- // 先减一在替换，解决输入完第一次删除位置错误
        }
        Vue.set(this.plateNumberArr, this.plateNumberIndex, '')
        if (this.plateNumberIndex < 0) { // 下标不可小于0
          this.plateNumberIndex = 0
        }
      }
      if (this.plateNumberIndex > 0) { // 根据当前下标替换键盘内容，如果下标大于0，则打开字母数字输入否则就是省简称的输入
        this.keyarr = this.numberLetterKey
      } else {
        this.keyarr = this.firstArr
      }
      this.inputRestraints()
    },
    inputRestraints() { // 数字字母键盘的输入约束方法
      if (!isNaN(parseInt(this.keyarr.normal[0]))) {
        if (parseInt(this.plateNumberIndex) === 1) {
          this.numberLetterKeyState = {
            normal: '000000000011111111111111111111',
            special: '11111100'
          }
        } else if (this.plateNumberIndex === this.plateNumberLength - 1) {
          this.numberLetterKeyState = {
            normal: '111111111111111111011111011111',
            special: '11111111'
          }
        } else if (this.plateNumberIndex > 1) {
          this.numberLetterKeyState = {
            normal: '111111111111111111011111011111',
            special: '11111100'
          }
        }
      } else {
        this.numberLetterKeyState = {
          normal: '',
          special: ''
        }
      }
    },
    closeInput() { // 关闭车牌输入弹窗
      // 重置所有车牌参数并将车牌类型进行切换
      this.plateNumberIndex = 0
      this.choosePlate = -1
      this.keyarr = this.firstArr
      this.selectType = 0
      this.plateNumber = ''
      this.plateNumberArr = ['', '', '', '', '', '', '']
      this.plateNumberLength = 7
      this.$emit('closePlateInput')
    },
    submitPlateInfo() { // 点击确定按钮后校验车牌输入是否符合规范
      if (this.selectType === 2) { // 判断特殊车牌情况，以下所有return用于截断函数执行，防止错误的调用父组件方法关闭车牌号输入弹窗
        let numLen = this.plateNumber.length
        if (numLen < 1) {
          this.Toast.showShortBottom('请输入车牌号码')
          return false
        } else if (numLen < 11) {
          this.$emit('getPlateInfo', {
            plateNumber: this.plateNumber,
            plateColor: this.choosePlate
          })
          return true
        }
        this.Toast.showShortBottom('请填写正确的车牌号')
        return false
      } else { // 判断普通和新能源车牌
        this.plateNumber = this.plateNumberArr.join('')
        if (this.plateNumber.length < 1) { // 车牌号长度验证
          this.Toast.showShortBottom('请输入车牌号码')
          return false
        } else if (this.plateNumber.length < this.plateNumberLength) { // 车牌号长度验证
          this.Toast.showShortBottom('请填写正确的车牌号')
          return false
        } else if (this.choosePlate < 0) { // 车牌颜色验证
          this.Toast.showShortBottom('请选择车牌颜色')
          return false
        } else {
          console.log('emit')
          this.$emit('getPlateInfo', {
            plateNumber: this.plateNumber,
            plateColor: this.choosePlate
          })
          return true
        }
      }
    },
    chooseThisPlate(num) { // 选中当前车牌颜色
      this.choosePlate = num
    },
    choosePlateIndex(index) { // 选中当前车牌输入框
      this.keyboardState = true
      this.plateNumberIndex = index
      if (this.plateNumberIndex > 0) { // 根据当前下标替换键盘内容，如果下标大于0，则打开字母数字输入否则就是省简称的输入
        this.keyarr = this.numberLetterKey
      } else {
        this.keyarr = this.firstArr
      }
      this.inputRestraints()
    },
    specialPlateNumber() {
      this.plateNumber = this.plateNumber.replace(/\s*/g, '').substring(0, 10)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../common.scss';
.mask {
  .input_area {
    width: 622px;
    position: absolute;
    background-color: #fff;
    top: 300px;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 8px; /*no*/
    h3 {
      padding: 32px 0;
      text-align: center;
    }
    .plate_type {
      display: flex;
      background-color: #f0f4fd;
      border-radius: 4px; /*no*/
      margin: 0 32px 32px 32px;
      .plate_name {
        width: 100%;
        text-align: center;
        height: 52px;
        line-height: 52px;
        color: #666666;
      }
      .select_type {
        border-radius: 4px; /*no*/
        background-color: #027aff;
        color: #fff;
      }
    }
    .color {
      margin: 0 32px;
      .title {
        color: #666666;
        margin-bottom: 18px;
      }
      .plate_area {
        display: flex;
        flex-wrap: wrap;
        .plate {
          width: 50%;
          display: flex;
          .normal_icon {
            width: 48px;
            height: 48px;
            line-height: 48px;
            display: inline-block;
            text-align: center;
            color: #027aff;
          }
          img {
            height: 48px;
          }
        }
        .plate_special {
          align-items: center;
          height: 48px;
          i {
            color: $fontColorMini !important;
          }
          p {
            border: 1px solid #fff; /*no*/
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
    .plate_number {
      margin: 32px;
      .title {
        color: #666666;
        margin-bottom: 18px;
      }
      .special_input_area {
        .plate_input {
          width: 90%;
          height: 88px;
          line-height: 88px;
          border: 0;
          background-color: #f0f4fd;
          border-radius: 4px; /*no*/
          padding: 0 5%;
        }
      }
      .input_plate_area {
        .special_input {
          .input_case {
            width: 56px;
            height: 88px;
            text-align: center;
            line-height: 88px;
            border-radius: 4px; /*no*/
            background-color: #f0f4fd;
            border: 1px solid #fff; /*no*/
          }
          .select_input_case {
            border: 1px solid $themeColors; /*no*/
          }
        }
      }
    }
    .ctrl_area {
      border-top: 1px solid #ccc; /*no*/
      div {
        width: 50%;
        height: 86px;
        text-align: center;
        line-height: 86px;
      }
      .confirm_button {
        color: #027aff;
        border-left: 1px solid #ccc; /*no*/
      }
    }
  }
  .keyboard {
    position: absolute;
    bottom: 0;
    background-color: #f0f4fd;
    padding: 10px 0;
    p {
      width: 56px;
      height: 88px;
      text-align: center;
      line-height: 88px;
      margin: 8px;
      background-color: #fff;
      border-radius: 4px; /*no*/
    }
    .not_allow {
      color: #ccc;
    }
    .close_keyboard {
      width: 472px;
    }
    .icon-key-delete {
      width: 156px;
      background-color: #abb3bd;
    }
    .small_delete {
      width: 80px;
    }
    .normal_key {
      padding-bottom: 10px;
    }
  }
}
</style>
